<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./lib/vue.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap.css">
  <style>
    .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateY(150px);
        }

        .v-enter-active,
        .v-leave-active {
          transition: all 0.8s ease;
        }

        /* 以下两个配合使用实现列表后续元素渐渐飘上来的效果 */
        .v-move{
          transition: all 0.8s ease;
        }
        .v-leave-active {
          position: absolute;
        }


        li:hover{
          background-color: hotpink;
          transition: all 0.4s ease;
        }
        </style>
</head>

<body>
  <div id="app">

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加品牌</h3>
      </div>
      <div class="panel-body form-inline">
        <label>
          Id:
          <input type="text" class="form-control" v-model="id">
        </label>
        <label>
          Name:
          <input type="text" class="form-control" v-model="name">
        </label>
        <!-- 在vue中,使用事件绑定机制,为元素指定处理函数的时候,如何加了小括号,就可以给函数传参了 -->
        <input type="button" class="btn btn-primary" value="添加" @click="add">

        <label>
          搜索名称关键字:
          <input type="text" class="form-control" v-model="keywords">
        </label>
      </div>
    </div>

    <table class="table table-bordered tabel-hover table-striped">

      <!-- <ul> -->
        <!-- 在实现列表过度的时候, 如果过度的元素是通过v-for循环出来的,使用transitiongroup 包裹 -->
        <!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个元素设置 :key 属性-->
        <!-- appear 实现入场时候的效果 -->
        <!-- tag="ul" 指定transition-group渲染为指定的元素,如果不指定默认为span标签-->
        <transition-group appear tag="ul">
          <li v-for="item in search(keywords)" :key="item.id" @click="del(item.id)">
            {{item.id}}---
            {{item.name}}---
            {{item.ctime}}
          </li>
        </transition-group>
      <!-- </ul> -->

    </table>

  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [{
            id: 1,
            name: '奔驰',
            ctime: new Date()
          },
          {
            id: 2,
            name: '宝马',
            ctime: new Date()
          },
          {
            id: 3,
            name: '奥迪',
            ctime: new Date()
          }
        ],
        keywords: '' // 搜索的关键字
      },
      methods: {
        add() { // 添加的方法
          // 过程分析
          // 1. 获取id和name
          // 2. 组成对象
          // 3. 把对象调用数组的相关方法,添加到当前data上的list中
          var car = {
            id: this.id,
            name: this.name,
            ctime: new Date()
          };
          this.list.push(car);
          this.id = this.name = '';
        },
        del(id) { // 根据id删除数据
          // 过程分析
          // 1. 如何根据id,找到删除这一项的索引
          // 2. 如果找到索引, 直接调用数组的splice方法
          this.list.some((item, i) => {
            if (item.id == id) {
              // splice() 向数组添加或删除项目
              this.list.splice(i, 1)
              // 在数组的方法中,如果return true, 就会立即终止数组的循环
              return true;
            }
          })

        },
        search(keywords) { // 根据关键字进行数据的搜索

          return this.list.filter(item => {
            // ES6 中,为字符串提供了一个新的方法,叫 String.prototype.includes('要包含的字符串')
            // 如果包含,则返回true,否则返回false
            if (item.name.includes(keywords)) {
              return item;
            }
          })
        }
      }
    });
  </script>
</body>

</html>
